<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Grouped Menu Items With Titles From JavaScript</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../yui/build/menu/assets/skins/sam/menu.css" />
<!-- The following modules were requested but are not defined: container-core -->
<script type="text/javascript" src="../yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../yui/build/container/container_core.js"></script>
<script type="text/javascript" src="../yui/build/menu/menu.js"></script>
<script type="text/javascript" src="mymenu.js"></script>
<!-- The following modules were requested but are not defined: container-core -->
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
	var oMenu;
    // Instantiate and render the menu when the page's DOM is ready
    YAHOO.util.Event.onDOMReady(function () {
        /*
             Instantiate the menu.  The first argument passed to the 
             constructor is the id of the DOM element to be created for the 
             menu; the second is an object literal representing a set of 
             configuration properties for the menu.
        */
        oMenu = new YAHOO.widget.Menu("menuwithgroups",{ fixedcenter: true, lazyLoad: true });
		
        /*
            Add items to the menu by passing a multi-dimensional array of 
            object literals (each of which represents a set of 
            YAHOO.widget.MenuItem configuration properties) to the 
            "addItems" method.
        */
        oMenu.addItems([
            [
                { text: "111", url: "" },
				{ text: "112", url: "" },
				{ text: "113", url: "" }
            ],
            [
				{ text: "221", url: "" },
				{ text: "222", url: "" },
				{ text: "223", url: "" } 
            ],
			[
                { text: "before", url: "" },
				{ text: "111", url: "" },
				{ text: "end", url: "" }
            ]
        ]);

        // Add the title for each group of menu items
        oMenu.setItemGroupTitle("Title1", 0);
        oMenu.setItemGroupTitle("Title2", 1);

        oMenu.showEvent.subscribe(function () {
            this.focus();
        });

        /*
             Since this menu is built completely from script, call the "render" 
             method passing in the id of the DOM element that the menu's 
             root element should be appended to.
        */
        oMenu.render("rendertarget");

        YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
		oMenu.show();
    });
	
	var oMenuItemGoogle = new YAHOO.widget.MenuItem("MyGoogle", {url:"http://www.google.com"});
	var oMenuItemYahoo = new YAHOO.widget.MenuItem("MyYahoo", {url:"http://www.yahoo.com"});
	
    function addMenuItem() {
		oMenu.insertItem(oMenuItemGoogle, 1, 2);
		oMenu.insertItem(oMenuItemYahoo, 2, 2);
		showMenu();
	}
	
	function removeMenuItem() {
		oMenu.removeItem(oMenuItemGoogle, 2);
		oMenu.removeItem(oMenuItemYahoo, 2);
		showMenu();
	}
	
	function showMenu() {
		oMenu.render("rendertarget");
		oMenu.show();
	}
	
	var iGroup = 0;
	var iItem = 0;
	
	function test1() {
		oMenu.clearContent();
				
		var idxGroup;
		var idxItem;
		var oMenuItem ;
		
		for(idxGroup = 0 ; idxGroup < 10 ; idxGroup++) {
			for(idxItem = 0 ; idxItem < 10 ; idxItem++) {
				oMenuItem = new YAHOO.widget.MenuItem("Item" + (iItem++), {url:"http://www.google.com"});
				oMenu.addItem(oMenuItem, idxGroup);
			}
			oMenu.setItemGroupTitle("Group" + (iGroup++), idxGroup);
		}
		
		oMenu.showEvent.subscribe(function () {
			this.focus();
        });
        oMenu.render("rendertarget");

        //YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
		oMenu.show();
	}
	function test2() {
		showMenu();
	}
</script>

<br/><br/><br/>
<button id="menutoggle" type="button">Show Menu</button>
<br/>

<button type="button" onclick="addMenuItem()">Add</button>
<br/>

<button type="button" onclick="removeMenuItem()">Remove</button>
<br/>

<button type="button" onclick="test1()">Test1</button>
<br/>

<button type="button" onclick="test2()">Test2</button>
<br/>

<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
